<template>
    <el-cascader ref="cascader" v-model="selectIds" clearable filterable :options="regionTree" :props="{
        checkStrictly: isCheckStrictly,
    }" @change="handleChange" @focus="handleFocus">

    </el-cascader>
</template>

<script>
import region from "./regionData.json"
import { cloneDeep } from "lodash-es"
export default {
    props: {
        // 选择地址的等级、1表示只会显示省、2表示显示省市、3表示显示省市区、4表示显示省市区街道 1
        level: {
            type: Number | String,
            default: 3,
        },
        isCheckStrictly: {
            type: Boolean,
            default: false
        },
        index: {
            type: Number,
        },
        mark:{  //传过来的标识
            type:Object,
            default: function (){
              return null;
            }
        },
        addressList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            regionTree: [],
            selectIds: [],
        }
    },
    watch: {
        addressList(val) {
            if (val.some(item => item)) {
                val = val.filter(item => item) //先把空的字符串去掉
                this.selectIds = val.filter(item => typeof item == "number" || Number(item)); //过滤获取地区id,
                this.names = val.filter(item => typeof item == "string" && !Number(item));//过滤获取地区名字
                this.selectIds = this.selectIds.slice(0, this.level)

                this.names = this.names.slice(0, this.level)
                // 如果有地区名字传过来那么就用名字和id作为cascader的options，这个是在编辑的时候用的
                // 在编辑的时候需要展示地区数据，所有要通过传过来的id和名字组成options
                if (this.names.length > 0 && !this.flag) {
                    this.regionTree = []
                    this.selectIds.forEach((item, index) => {
                        this.arrToTree(this.regionTree, { value: item, label: this.names[index] })
                    })
                } else if (this.names.length == 0 && !this.flag) {
                    this.handleFocus()
                }

            } else {
                this.selectIds = []
            }
        }
    },
    methods: {
        handleFocus() {
            // 用flag表示只会赋值一次这个数据
            if (this.flag) return
            setTimeout(() => {
                // 开启定时，获取数据，否则下拉会卡顿一下才显示出来
                this.regionTree = cloneDeep(region.data)
                this.removeChildren(this.regionTree, this.level);
                this.flag = true
            }, 150)
        },
        handleChange(e) {
            let node = this.$refs.cascader.panel.getNodeByValue(e)
            this.levels = 0
            node = this.formatNode(node)

            // 如果有索引标识传过来也传过去
            if (this.index||this.index===0) node.index = this.index
            // 如果有其它标识传过来也传过去
            if(this.mark) node.mark = this.mark
            // 选中的层级
            if (this.levels) node.levels = this.levels


            this.$emit("getAddress", node)
        },
        // 父组件传过来的值通过调用这个方法来格式化成cascader组件的options
        arrToTree(arr, obj) {
            if (arr.length == 0) {
                arr.push(obj)
            } else if (!arr[0].children) {
                arr[0].children = []
                arr[0].children.push(obj)
            } else {
                this.arrToTree(arr[0].children, obj)
            }
        },
        /*
            移除最后的子节点
        */
        removeChildren(arr, level) {
            if (!arr || arr.length == 0) return
            level--
            if (level == 0) {
                arr.forEach(item => {
                    if (item.hasOwnProperty('children')) delete item.children
                })
            } else {
                arr.forEach(item => {
                    if (item.children) {
                        this.removeChildren(item.children, level)
                    } else {
                        delete item.children
                    }
                })
            }
        },
        /*
            把选中节点的值格式化
        */
        formatNode(node, obj) {
            if (!obj) {
                obj = {}
                switch (this.level) {
                    case 4:
                        obj.streetId = ""
                        obj.streetName = ""
                    case 3:
                        obj.areaId = ""
                        obj.areaName = ""
                    case 2:
                        obj.cityId = ""
                        obj.cityName = ""
                    case 1:
                        obj.provinceId = ""
                        obj.provinceName = ""
                }
            }

            if (!node) return obj

            this.levels++

            switch (node.level) {
                case 1:
                    obj.provinceId = node.value
                    obj.provinceName = node.label
                    break
                case 2:
                    obj.cityId = node.value
                    obj.cityName = node.label
                    break
                case 3:
                    obj.areaId = node.value
                    obj.areaName = node.label
                    break
                case 4:
                    obj.streetId = node.value
                    obj.streetName = node.label
                    break
            }

            if (node.parent) this.formatNode(node.parent, obj)
            return obj
        }
    }
}
</script>

<style lang="scss" scoped></style>
